<template>
    <div ref="holder" :class="{'picker-holder': !holderClass, holderClass, 'picker-position': true}">
        <div class="picker-success" v-if="removable" v-show="success" ><span class="picker-bg-success"></span><i class="mintui mintui-field-success"></i></div>
        <div class="picker-remove" v-if="removable" v-show="!readonly && !!imageData" @click="_remove"><i class="iconfont icon-close"></i></div>
        <div :class="{'picker-holder-inner': !innerHolderClass, innerHolderClass}" @click="_chooseFile('fileRef')" :style="{'min-height': imageHeight}">
            <img :src="imageData ? imageData : (isPlain ? pickerImg : null)"
                v-if="!!pickerImg || !!imageData"
                :class="{'picker-plain': !imageData && isPlain && !plainClass, plainClass}"
                :style="{'height': imageHeight, 'width': imageWidth}"
                />
            <form action="javascript;" ref="fileRefForm">
                <input type="file"  ref="fileRef" v-show="false" @change="_handleFileChange" :accept="fileAccept">
            </form>
        </div>
    </div>
</template>


<script>

export default {

    data() {
        return {
            isPlain: true,
            currentImg: null,
            selectedFile: null,
            selectedImageData: '',
            success: false
        }
    },

    props: {
        pickerImg: String,
        fileAccept: {
            type: String,
            default: 'image/*'
        },
        showAfterSelected: {
            type: Boolean,
            default: true
        },
        plainClass: String,
        holderClass: String,
        innerHolderClass: String,
        initData: String,
        removable: {
            type: Boolean,
            default: true
        },
        name: String,
        height: String,
        readonly: Boolean
    },

    computed: {
        imageWidth() {
            return this.isPlain && this.pickerImg ? null : (this.height ? 'auto' : '100%')
        },

        imageHeight() {
            return this.isPlain  && this.pickerImg ? null : (this.height || null)
        },

        imageData() {

            if (!this.selectedImageData && this.isPlain && this.initData) {
                return this.initData
            } else if (this.selectedImageData) {
                return this.selectedImageData
            } else {
                return null
            }
        }

    },

    mounted() {
        this.isPlain = !this.selectedImageData
        this.success = !!this.initData
    },

    methods: {
        _chooseFile(fileRef) {
            if (!this.readonly) {
                this.$refs['fileRef'].click()
            }
        },

        _ok() {
            this.success = true
        },

        _handleFileChange($event) {
            
            let target = $event.target
            let imageEl = target.previousElementSibling || {}
            let file = target.files[0]

            this.$refs.fileRefForm.reset()

            if (file) {
                this.selectedFile = file
            }

            if (file && this.showAfterSelected) {
                let reader = new FileReader()

                reader.onload = ($e) => {
                    this.selectedImageData = $e.target.result
                    this.isPlain = false

                    this.$emit('fileChanged', {
                        targetName: this.name,
                        fileEl: target,
                        fileData: this.selectedFile,
                        imageData: this.selectedImageData,
                        ok: this._ok
                    })

                }

                reader.readAsDataURL(file)
            }
        },

        _remove() {
            this.success = false
            this.$refs.fileRefForm.reset()
            this.selectedFile = null
            this.isPlain = true
            this.selectedImageData = ''
            this.$emit('fileRemoved', {
                targetName: this.name
            })
        }
    }

}
</script>

<style lang="scss" scoped>

.picker-position {
    position: relative;

    .picker-remove {
        position: absolute;
        top: 0;
        right: 0;
        i.iconfont {
            font-size: 24px;
            color: #aaaaaa;
        }
    }

    .picker-success {
        position: absolute;
        top: 0;
        left: 0;

        i.mintui {
            font-size: 24px;
            border-radius: 50%;
            color: #4caf50;
        }
    }
}

.picker-holder, .picker-holder-inner {
    width: 100%;
    min-height: inherit;
    max-width: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        width: 100%;
        &.picker-plain {
            width: 60px;
        }
    }
}

</style>

